<template>
    <div id="appRoot">
        <sidebar>
            <card label="指标管理">
                <el-button slot="header" type="primary" size="small" @click="addQuota">添加指标
                </el-button>
                <div slot="header" class="fr">
                    <a class="quota-nav" href="/quotaType.html">指标类型管理</a>
                    <a class="quota-nav" href="/quotaDepart.html">隶属部门管理</a>
                </div>
                <div class="from-query">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="搜索">
                            <el-input size="small" v-model="queryData.labelName" placeholder="输入指标名关键字"></el-input>
                        </el-form-item>
                        <el-form-item label="指标大类">
                            <el-select size="small" v-model="queryData.busiId" placeholder="全部类型">
                                <el-option label="全部" value="-1"></el-option>
                                <el-option v-for="item in businessConfig" :label="item.busiName" :value="item.busiId" :key="item.busiId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="隶属部门">
                            <el-select size="small" v-model="queryData.tradeId" placeholder="全部">
                                <el-option label="全部" value="-1"></el-option>
                                <el-option v-for="item in tradeConfig" :label="item.tradeName" :value="item.tradeId" :key="item.tradeId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="small" type="primary" @click="getTableData">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </card>
            <div class="table-container" v-loading.body="loading">
                <el-table
                        :data="tableData"
                        stripe
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="labelName"
                            align="center"
                            header-align="left"
                            label="指标名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="busiName"
                            align="center"
                            header-align="left"
                            label="指标大类"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="tradeName"
                            align="center"
                            header-align="left"
                            label="隶属部门">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            align="center"
                            header-align="left"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            header-align="left"
                            label="操作">
                        <template scope="scope">
                            <el-button v-if="scope.row.state == 1" type="text" size="small" @click="changeSate(scope.row.labelId, 0)">停用</el-button>
                            <el-button v-else type="text" size="small" @click="changeSate(scope.row.labelId, 1)">启用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-wrapper">
                    <el-pagination
                            @current-change="getTableData"
                            :current-page.sync="paginationData.currentPage"
                            :page-size="paginationData.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="paginationData.total">
                    </el-pagination>
                </div>
            </div>
        </sidebar>
        <el-dialog title="添加指标" :visible.sync="dialogVisible"  @close="closeQuota" class="dialog-form">
            <el-form :model="dialogAddQuotaData" :rules="rules" ref="ruleForm">
                <el-form-item label="指标名称：" label-width="120px" prop="labelName">
                    <el-input v-model="dialogAddQuotaData.labelName" auto-complete="off" placeholder="输入指标名称"></el-input>
                </el-form-item>
                <el-form-item label="指标大类：" label-width="120px" prop="busiId">
                    <el-select v-model="dialogAddQuotaData.busiId" placeholder="请选择指标大类">
                        <el-option v-for="item in businessConfig" :label="item.busiName" :value="item.busiId" :key="item.busiId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="隶属部门：" label-width="120px" prop="tradeId">
                    <el-select v-model="dialogAddQuotaData.tradeId" placeholder="请选择隶属部门">
                        <el-option v-for="item in tradeConfig" :label="item.tradeName" :value="item.tradeId" :key="item.tradeId"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeQuota">取 消</el-button>
                <el-button type="primary" @click="submitAdd">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import sidebar from 'components/layout/sidebar.vue'
    import card from 'components/layout/card.vue'
    import ajax from 'common/ajax.js'
    import ajaxUrls from 'common/ajaxUrls.js'
    import {qryBusinessConfig, qryTradeConfig} from 'common/unitQry.js'
    export default{
        data(){
            return {
                businessConfig: [],
                tradeConfig: [],
                loading: false,
                queryData: {
                    busiId: '-1',
                    labelName: '',
                    tradeId: '-1'
                },
                paginationData: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                tableData: [],
                dialogVisible: false,
                dialogAddQuotaData: {
                    busiId: '',
                    labelName: '',
                    tradeId: ''
                },
                rules: {
                    labelName: [
                        {required: true, message: '请填写指标名称', trigger: 'blur'}
                    ],
                    busiId: [
                        {type: 'number', required: true, message: '请选择指标大类', trigger: 'change'}
                    ],
                    tradeId: [
                        {type: 'number', required: true, message: '请选择隶属部门', trigger: 'change'}
                    ]
                }
            }
        },
        mounted(){
            this.getTableData();
            qryBusinessConfig().then(data => {
                this.businessConfig = data.data.items || [];
            });
            qryTradeConfig().then(data => {
                this.tradeConfig = data.data.items || [];
            });
        },
        methods: {
            addQuota(){
                this.dialogVisible = true;
            },
            closeQuota(){
                this.dialogVisible = false;
                this.resetForm();
            },
            submitAdd(){
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.sendAdd();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            sendAdd(){
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.quota,
                    action: 'addLabelConfig',
                    data: this.dialogAddQuotaData
                }).then(data => {
                    this.closeQuota();
                    this.resetTableData();
                }).catch((err) => {

                })
            },
            resetForm(){
                this.$refs.ruleForm.resetFields();
            },
            resetTableData(){
                this.paginationData.currentPage = 1;
                this.getTableData();
            },
            getTableData(){
                let data = {
                    pageNum: this.paginationData.currentPage,
                    pageRow: this.paginationData.pageSize
                };
                data = Object.assign(data, this.queryData);
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.quota,
                    action: 'qryLabelConfig',
                    data: data
                }).then(function (data) {
                    this.tableData = data.data.items || [];
                    this.paginationData.total = data.data.totalNum || 0;
                }.bind(this)).catch(function (err) {

                })
            },
            changeSate(id, state){
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.quota,
                    action: 'modLabelConfigState',
                    data: {
                        labelId: id,
                        state: state
                    }
                }).then(function (data) {
                    this.getTableData();
                }.bind(this)).catch(function (err) {

                })
            }
        },
        components: {
            sidebar,
            card
        }
    }
</script>

<style lang="scss">
    .quota-nav {
        display: inline-block;
        margin-left: 10px;
        font-size: 14px;
        line-height: 36px;
        color: #1b84d7;
    }
</style>